﻿<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Component Panel</title>

    <link rel="stylesheet" href="stylesheets/fabric.min.css">
    <link rel="stylesheet" href="components/Panel/Panel.min.css">

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.fabric.min.js"></script>
    <script type="text/javascript" src="components/Panel/Jquery.Panel.js"></script>
    <!--<script type="text/javascript" src="Panel.js"></script>-->
    <script type="text/javascript">
    $(document).ready(function() {
      // File Picker demo fixes
      if ($('.ms-FilePicker').length > 0) {
        $('.ms-FilePicker').css({
          "position": "absolute !important"
        });

        $('.ms-Panel').FilePicker();
      } else {
        if ($.fn.Panel) {
          $('.ms-Panel').Panel();
        }
      }

      if(fabric && fabric['Panel']) {
        var component, componentHolder;
        componentHolder = document.querySelector('.component-holder');

        if (componentHolder) {
          component = new fabric.Spinner(componentHolder);
        }
      }
    });
    </script>

    <!-- Styles specifically for this page, not required for proper display on components  -->
    <style type="text/css">
        body {
            margin: auto 20px;
        }

        h1 {
            padding: 8px;
        }

        #componentWrapper {
            width: 100%;
            height: 100%;
        }

        .sample-wrapper {
            margin: 20px;
        }

        .ms-ContextualMenu.is-open {
            position: relative;
            margin-bottom: 10px;
        }

        .ms-Dialog {
            position: relative;
            margin-bottom: 10px;
        }

        .ms-NavBar-item .ms-ContextualMenu {
            position: absolute;
        }

        .ms-CommandBar .ms-ContextualMenu {
            position: absolute;
        }
    </style>
</head>

<body>
    <h1 class="ms-font-su ms-fontColor-white ms-bgColor-themeDarker">Panel</h1>
    <div id="componentWrapper">
        <!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->
        <button class="ms-Button js-togglePanel">
            <span class="ms-Button-label">Open panel</span>
        </button>
        <div class="ms-Panel">
            <div class="ms-Overlay ms-Overlay--dark js-togglePanel"></div>
            <div class="ms-Panel-main">
                <div class="ms-Panel-commands">
                    <div class="ms-CommandBar">
                        <div class="ms-CommandBar-sideCommands">
                            <div class="ms-CommandBarItem icon-only">
                                <div class="ms-CommandBarItem-linkWrapper">
                                    <div class="ms-CommandBarItem-link">
                                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--circleFilled"></span>
                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Stars</span>
                                        <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="ms-CommandBarItem">
                                <div class="ms-CommandBarItem-linkWrapper">
                                    <div class="ms-CommandBarItem-link">
                                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--circleFilled"></span>
                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Stars</span>
                                        <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="ms-CommandBarItem">
                                <div class="ms-CommandBarItem-linkWrapper">
                                    <div class="ms-CommandBarItem-link">
                                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--circleFilled"></span>
                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Stars</span>
                                        <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ms-CommandBar-mainArea">
                            <div class="ms-CommandBarItem">
                                <div class="ms-CommandBarItem-linkWrapper">
                                    <div class="ms-CommandBarItem-link">
                                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--star"></span>
                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Stars</span>
                                        <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="ms-CommandBarItem">
                                <div class="ms-CommandBarItem-linkWrapper">
                                    <div class="ms-CommandBarItem-link">
                                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--onedriveAdd"></span>
                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Documents</span>
                                        <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="ms-CommandBarItem">
                                <div class="ms-CommandBarItem-linkWrapper">
                                    <div class="ms-CommandBarItem-link">
                                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--flag"></span>
                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Flags</span>
                                        <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="ms-CommandBarItem">
                                <div class="ms-CommandBarItem-linkWrapper">
                                    <div class="ms-CommandBarItem-link">
                                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--smiley"></span>
                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Smiley</span>
                                        <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="ms-CommandBarItem">
                                <div class="ms-CommandBarItem-linkWrapper">
                                    <div class="ms-CommandBarItem-link">
                                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--officeStore"></span>
                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Office Store</span>
                                        <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="ms-CommandBarItem">
                                <div class="ms-CommandBarItem-linkWrapper">
                                    <div class="ms-CommandBarItem-link">
                                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--lync"></span>
                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Lync</span>
                                        <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                                    </div>
                                </div>
                            </div>
                            <!-- Overflow Command -->
                            <div class="ms-CommandBarItem icon-only ms-CommandBarItem-overflow">
                                <div class="ms-CommandBarItem-linkWrapper">
                                    <div class="ms-CommandBarItem-link">
                                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--ellipsis"></span>
                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Ellipsis</span>
                                        <i class="ms-CommandBarItem-chevronDown ms-Icon ms-Icon--chevronDown"></i>
                                    </div>
                                </div>
                                <ul class="ms-CommandBar-overflowMenu ms-ContextualMenu"></ul>
                            </div>
                            <!-- End Overflow Command -->
                        </div>
                    </div>
                </div>
                <div class="ms-Panel-contentInner">
                    <span class="ms-Panel-headerText">Panel</span>
                    <p class="ms-font-m">Content goes here.</p>
                </div>
            </div>
        </div>

    </div>
</body>
</html>
